<template>
  <div class="tasks">
    <el-card>
      <template #header>
        <span>任务中心</span>
      </template>
      
      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <el-tab-pane label="全部任务" name="all">
          <TaskList :type="'all'" />
        </el-tab-pane>
        <el-tab-pane label="已发布" name="published">
          <TaskList :type="'published'" />
        </el-tab-pane>
        <el-tab-pane label="已接受" name="accepted">
          <TaskList :type="'accepted'" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import TaskList from '../../components/TaskList.vue'

const activeTab = ref('all')

const handleTabChange = (tab) => {
  console.log('切换到标签:', tab)
}
</script>

<style scoped>
.tasks {
  padding: 20px;
}
</style>
